<template>
    <div id="dmap">
        <div id="exponentmap" class="exponentmap" ></div>
        <div class="change_tab">
            <div class="change_tab_o_show" @click="changeChooseTab('line')">区域指数预警</div>
            <div class="change_tab_t_hide" @click="changeChooseTab('tab')">指数分析</div>
        </div>
        <div v-show="showLineFlag" class="left-line">
            <div class="top-line">
                <div>
                   <!-- <select name="selectId" id="yearId" @change="initselect()" class="select">
                    </select>-->
                    <div id="wrap">
                        <div id="selectYear">
                            <ul>
                                <li v-for="term in years" v-bind:id="term" @click="chooseCheckYearBox(term)"><input type="checkbox" name="checkYear" v-bind:vaule="term"/>{{term + '年'}}</li>
                            </ul>
                            <span id="shujuYear">请选择<span class="creat"></span></span>
                        </div>
                    </div>
                </div>
                <div id="yearLine" class="yearLine" sytle="width:540px;height:230px"></div>
            </div>
            <div class="center-line">
                <div>
                    <select name="selectId" id="yearMonthId" @change="initselectMonth()" class="select">

                    </select>
                    <div id="wrap">
                        <div id="selectBoard">
                            <ul>
                                <li v-for="item in months" v-bind:Id="item.liClass" @click="chooseCheckBox(item)"><input type="checkbox" name="check" v-bind:id="item.value" v-bind:vaule="item.value"/>{{item.text + '月'}}</li>
                            </ul>
                            <span id="shuju">请选择<span class="creat"></span></span>
                        </div>
                    </div>

                </div>
                <div id="monthLine" class="monthLine" sytle="width:540px;height:230px"></div>
            </div>
            <div class="buttom-line">
                <div>
                    <select name="selectId_holi" id="yearHolidayId" @change="selectInitHolidayLine()" class="select" style="margin-left:393px;">
                    </select>
                    <select id="holidayId" @change="selectInitHolidayLine()" class="select" style="margin-left:465px;">
                        <option value="H1">元旦</option>
                        <option value="H2">春节</option>
                        <option value="H3">清明节</option>
                        <option value="H4">劳动节</option>
                        <option value="H5">端午节</option>
                        <option value="H6">中秋节</option>
                        <option value="H7">国庆节</option>
                    </select>
                </div>
                <div id="holidayLine" class="holidayLine" sytle="width:540px;height:230px"></div>
            </div>
        </div>
        <div v-show="showTabFlag" class="metro_tab">
            <h4>地铁站-区域指数预警</h4>
            <table class='table_tab_o'>
                <tr>
                    <td>畅通</td>
                    <td>基本畅通</td>
                    <td>轻度畅通</td>
                    <td>中度拥堵</td>
                    <td>严重拥堵</td>
                </tr>
                <tr>
                    <td>0-2</td>
                    <td>2-4</td>
                    <td>4-6</td>
                    <td>6-8</td>
                    <td>8-10</td>
                </tr>
                <tr class='table_tab_o_tr'>
                    <td style="background-color: #92d050;">V>40</td>
                    <td style="background-color: #ccff99;">40≥V>30</td>
                    <td style="background-color: #ff0;">30≥V>20</td>
                    <td style="background-color: #fc0;">20≥V>15</td>
                    <td style="background-color: #f00;">V<15</td>
                </tr>
            </table>
            <table class='table_tab_t'>
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>交通指数</th>
                        <th>拥堵等级</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in listTabData" @click="initCircleData(item)" v-bind:id="item.classId">
                        <td>{{item.properties.regionName}}</td>
                        <td>{{item.properties.percent}}</td>
                        <td><div v-bind:class="item.class" style="margin-left:65px;width: 30px;height: 20px;"></div></td>
                    </tr>
                </tbody>


            </table>
        </div>
        <div class="cennavi" style='position:absolute;z-index:51;left:15px;bottom: 5px;'>
            <img style="widht:30px;height:25px;" src="static/img/pic-logo-cennavi.png">
        </div>
    </div>


</template>
<script>
    var mount = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']

    import * as globals from '../global'
    import env from '../global/env'
    /*   import EnterTraffic from './EnterTra/!**!/ffic'*/
    import * as configs from '../config'
    import {mapGetters} from 'vuex'
    import {jrange} from '../global/jqueryrange'


    var echarts = require('echarts');

    export default{
        name: 'ExponentMap',
        data(){
            return {
                rlatlon:'',
                showLineFlag:false,
                showTabFlag:true,
                listTabData:[],
                fullYears:[],
                years:[],
                months:[],
                chenckCount:[],
                checkTexts:[],
                checkYears:[],
                markers:[],

            }

        },
        components:{
            /*EnterTraffic*/
        },
        methods: {
            changeChooseTab(flag){
                if(flag == 'line'){
                    $('.change_tab_o_hide').removeClass('change_tab_o_hide').addClass('change_tab_o_show');
                    $('.change_tab_t_show').removeClass('change_tab_t_show').addClass('change_tab_t_hide');


                    this.showLineFlag = false;
                    this.showTabFlag = true;
                }else{

                    $('.change_tab_o_show').removeClass('change_tab_o_show').addClass('change_tab_o_hide');
                    $('.change_tab_t_hide').removeClass('change_tab_t_hide').addClass('change_tab_t_show');
                    this.showLineFlag = true;
                    this.showTabFlag = false;

                    var that = this;
                    setTimeout(() => {
                        var toDay = new Date();
                        that.checkYears.push(toDay.getFullYear());
                        that.chooseCheckYearBox("",true);
                        that.chenckCount.push(toDay.getFullYear()+'-'+(toDay.getMonth()+1))
                        that.checkTexts.push(toDay.getFullYear()+'-'+(toDay.getMonth()+1)+'月');
                        that.chooseCheckBox('',true)
                        that.selectInitHolidayLine();

                    },50)
                }

            },
            initCircleData(feat){
                console.log(feat);
                var listTabData = this.listTabData
                for(var i=0;i<listTabData.length;i++){
                    if(listTabData[i].properties.regionName == feat.properties.regionName){
                        $('#'+listTabData[i].classId).addClass('tab_tr');
                    }else{
                        $('#'+listTabData[i].classId).removeClass('tab_tr');
                    }
                }

                for(var i=0;i<this.markers.length;i++){
                    this.markers[i].remove();
                }
                var tempMarker = null;
                var el = document.createElement('div');
                el.className = 'marker_circle';

                tempMarker = new minemap.Marker(el, {offset: [-11, -11]})
                        .setLngLat(feat.geometry.coordinates)
                        .addTo(env.mapTo);
                this.markers.push(tempMarker);

                if(env.mapTo.getSource("pointSource")){
                    env.mapTo.removeSource("pointSource")
                }



                env.mapTo.addSource("pointSource", {
                    "type": "geojson",
                    "data": {
                        "type": "FeatureCollection",
                        "features": [
                            {
                                "type": "Feature",
                                "geometry": {
                                    "type": "Point",
                                    "coordinates": feat.geometry.coordinates
                                },
                                "properties": {
                                    "title": feat.properties.regionName,
                                    "icon": "school",
                                    "radius": feat.properties.offset
                                },
                            }
                        ]
                    }
                });

                if(env.mapTo.getLayer('points')){
                    env.mapTo.removeLayer('points');
                }

                var offset = parseInt(feat.properties.offset)+300;
                env.mapTo.addLayer({
                    "id": 'points',
                    "type": "circle",
                    "source": "pointSource",
                    'paint': {
                        'circle-radius': {
                            /**
                             * base:圆的半径随zoom级别变化的剧烈程度，
                             *      1：        近似于直线线
                             *      <1:        曲线开口向下
                             *      >1 && <1.9 曲线开口向上
                             * stops：[minzoom,minPixel],[maxzoom,maxPixel]
                             *        对应：最小zoom时的半径pixel像素大小，最大时的半径像素大小
                             * 其他中间zoom级别，根据base规定的线性（1）或曲线曲率，半径大小会相应变化
                             */
                            'base': 1.8,
                            'stops': [[5, 8], [17, offset]]
                        },

                        'circle-color': feat.color,      //填充圆形的颜色
                        'circle-blur': 0,              //模糊程度，默认0
                        'circle-opacity': 0.5,             //透明度，默认为1
                    },
                    "maxzoom": 18,                       //显示的最高room级别
                    filter: ['in', '$type', 'Point']
                });
                env.mapTo.setZoom(15);
                env.mapTo.flyTo({
                    center: feat.geometry.coordinates
                });

            },
            initFeatTab(){
                var that = this;


                $.get(globals.URL_BAOTOU_EXPONENT_DITIE+'?regionType=subway&dateType=').done(function (data) {
                        data = jQuery.parseJSON(data);
                    that.listTabData = data.features;
                    var feat = data.features;
                    for(var i=0;i<feat.length;i++){
                        feat[i]['classId']='feat'+i;
                        if(feat[i].properties.percent >= 0&&feat[i].properties.percent < 2){
                            feat[i]['class']='sudu1';
                            feat[i]['color']='#92d050';
                        }else if(feat[i].properties.percent >= 2&&feat[i].properties.percent < 4){
                            feat[i]['class']='sudu2';
                            feat[i]['color']='#ccff99';
                        }else if(feat[i].properties.percent >= 4&&feat[i].properties.percent < 6){
                            feat[i]['class']='sudu3';
                            feat[i]['color']='#ff0';
                        }else if(feat[i].properties.percent >= 6&&feat[i].properties.percent < 8){
                            feat[i]['class']='sudu4';
                            feat[i]['color']='#fc0';
                        }else if(feat[i].properties.percent >= 8&&feat[i].properties.percent < 10){
                            feat[i]['class']='sudu5';
                            feat[i]['color']='#f00';
                        }
                    }
                    that.listTabData = feat;

                })


            },
            chooseCheckYearBox(term,flag){

                var obj=document.getElementsByName('checkYear');
                for(var i=0; i<obj.length; i++){
                    if(term == obj[i].attributes[2].value){
                        if(obj[i].checked){
                            obj[i].checked=false;
                            $('#'+term).removeClass('selectd_che');
                            for(var m=0;m<this.checkYears.length;m++){
                                if (this.checkYears[m] == obj[i].attributes[2].value) {
                                    this.checkYears.splice(m,1)
                                }
                            }
                        }else{
                            obj[i].checked=true;
                            $('#'+term).addClass('selectd_che');
                            this.checkYears.push(obj[i].attributes[2].value);
                            var that = this;
                            if(this.checkYears.length>2){
                                $.each(obj,function(index,item){
                                    if(item.attributes[2].value == that.checkYears[0]){
                                        item.checked = false;
                                        $('#'+term).removeClass('selectd_che');
                                    }

                                });
                                that.checkYears.splice(0,1);
                            }
                        }
                    }
                }

                if(this.checkYears.length>0){

                    if(this.checkYears.length>1){
                        $("#shujuYear").empty().html(this.checkYears[0]+'年,'+this.checkYears[1]+'年');
                    }else{
                        $("#shujuYear").empty().html(this.checkYears[0]+'年');
                    }

                }else{
                    $("#shujuYear").empty().html('请选择<span class="creat"></span>');
                }
                var checkYears = this.checkYears;
                if(checkYears.length>0){
                    if(checkYears.length>1){
                        $.get(globals.URL_BAOTOU_EXPENCENT_YEAR+'?year='+checkYears[0]).done(function (data) {
                            data = jQuery.parseJSON(data);
                            $.get(globals.URL_BAOTOU_EXPENCENT_YEAR+'?year='+checkYears[1]).done(function (term) {
                                term = jQuery.parseJSON(term);
                                var c_index = data.c_index.split(',');
                                var c_index_second = term.c_index.split(',');
                                var tChart = echarts.init(document.getElementById('yearLine'));
                                tChart.setOption({
                                    title:{
                                        text:'年度指数分析',
                                        textStyle:{
                                            color:'#ebebef',
                                        },
                                    },
                                    tooltip: {
                                        trigger: 'axis',
                                        axisPointer: {
                                            type:'shadow',
                                        }
                                    },
                                    legend: {
                                        left:'23%',
                                        top:'10%',
                                        textStyle:{
                                            color:'#f7f7f8',
                                            fontWeight:20
                                        },
                                        data:[checkYears[0]+'年',checkYears[1]+'年']
                                    },
                                    grid:{
                                        show:true,
                                        left: '0px',
                                        right:'0px',
                                        top:'50px',
                                        bottom:'0px',
                                        containLabel: true,


                                        borderColor:'yellow',
                                    },
                                    xAxis: {
                                        type: 'category',
                                        boundaryGap: false,
                                        data: mount,
                                        axisLabel: {margin: 2, textStyle: {color: '#aaa'}},
                                    },
                                    yAxis: {
                                        boundaryGap: [0, '50%'],
                                        type: 'value',
                                        axisLabel: {interval: 0, textStyle: {color: '#ddd',fontSize:15}},
                                    },
                                    series: [
                                        {
                                            name: checkYears[0]+'年',
                                            type: 'line',
                                            smooth:true,
                                            symbol: 'none',
                                            itemStyle:{
                                                normal:{
                                                    color:'#34a02b',
                                                }
                                            },
                                            data: c_index
                                        },
                                        {
                                            name: checkYears[1]+'年',
                                            type: 'line',
                                            smooth:true,
                                            symbol: 'none',
                                            itemStyle:{
                                                normal:{
                                                    color:'#0288ce',
                                                }
                                            },
                                            data: c_index_second
                                        }
                                    ]

                                })

                            })
                        })
                    }else{
                        $.get(globals.URL_BAOTOU_EXPENCENT_YEAR+'?year='+checkYears[0]).done(function (data) {
                            data = jQuery.parseJSON(data);
                            var c_index = data.c_index.split(',');

                            var tChart = echarts.init(document.getElementById('yearLine'));
                            tChart.setOption({
                                title:{
                                    text:'年度指数分析',
                                    textStyle:{
                                        color:'#ebebef',
                                    },
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type:'shadow',
                                    }
                                },
                                legend: {
                                    left:'23%',
                                    top:'10%',
                                    textStyle:{
                                        color:'#f7f7f8',
                                        fontWeight:20
                                    },
                                    data:[checkYears[0]+'年']
                                },
                                grid:{
                                    show:true,
                                    left: '0px',
                                    right:'0px',
                                    top:'50px',
                                    bottom:'0px',
                                    containLabel: true,


                                    borderColor:'yellow',
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: mount,
                                    axisLabel: {margin: 2, textStyle: {color: '#aaa'}},
                                },
                                yAxis: {
                                    boundaryGap: [0, '50%'],
                                    type: 'value',
                                    axisLabel: {interval: 0, textStyle: {color: '#ddd',fontSize:15}},
                                },
                                series: [
                                    {
                                        name: checkYears[0]+'年',
                                        type: 'line',
                                        smooth:true,
                                        symbol: 'none',
                                        itemStyle:{
                                            normal:{
                                                color:'#34a02b',
                                            }
                                        },
                                        data: c_index
                                    }
                                ]

                            })

                        })
                    }

                }
                if(flag){
                    this.checkYears = [];
                }

            },
            initselectMonth(){
                var month = document.getElementById('yearMonthId').value;
                this.months = this.fullYears[month];
                var that = this;
                setTimeout(() => {
                    if(that.chenckCount.length>0){
                        var obj=document.getElementsByName('check');
                        var continueFalg = true;
                        for(var m=0;m<that.chenckCount.length;m++){

                            if(continueFalg){
                                for(var i=0; i<obj.length; i++) {
                                    if(obj[i].checked){
                                        obj[i].checked=false;
                                        $('#month'+(i+1)).removeClass('selectd_che');
                                    }

                                    if (that.chenckCount[m] == obj[i].attributes[3].value) {
                                        obj[i].checked=true;
                                        continueFalg = false;
                                    }
                                }
                            }

                        }

                    }
                },50)


            },
            chooseCheckBox(term,flag){
                var item = term.value;
                var obj=document.getElementsByName('check');
                for(var i=0; i<obj.length; i++){
                    if(item == obj[i].attributes[3].value){
                        if(obj[i].checked){
                            obj[i].checked=false;
                            $('#'+term.liClass).removeClass('selectd_che');
                            for(var m=0;m<this.chenckCount.length;m++){
                                if (this.chenckCount[m] == obj[i].attributes[3].value) {
                                    this.chenckCount.splice(m,1)
                                }
                            }
                            for(var t=0;t<this.checkTexts.length;t++){
                                if (this.checkTexts[t] == obj[i].attributes[3].value+'月') {
                                    this.checkTexts.splice(t,1)
                                }
                            }
                        }else{
                            obj[i].checked=true;
                            $('#'+term.liClass).addClass('selectd_che');
                            this.checkTexts.push(obj[i].attributes[3].value+'月'+'');
                            this.chenckCount.push(obj[i].attributes[3].value);
                            var that = this;
                            if(this.chenckCount.length>2){
                                $.each(obj,function(index,item){
                                    if(item.attributes[3].value == that.chenckCount[0]){
                                        item.checked = false;
                                        $('#month'+(index+1)).removeClass('selectd_che');
                                    }

                                });
                                that.checkTexts.splice(0,1);
                                that.chenckCount.splice(0,1);
                            }
                        }
                    }
                }
                if(this.checkTexts.length>0){
                    if(this.checkTexts.length>1){
                        $("#shuju").empty().html(this.checkTexts[0]+','+this.checkTexts[1]);
                    }else{
                        $("#shuju").empty().html(this.checkTexts[0]);
                    }

                }else{
                    $("#shuju").empty().html('请选择<span class="creat"></span>');
                }


                var xValue = new Array();
                var fValue = new Array();

                var uValue = new Array();
                var checks = this.chenckCount;
                if(checks.length>0){

                    if(checks.length>1){
                        var first = checks[0].split('-');
                        if(parseInt(first[1])<10){
                            first[1] = '0'+ first[1];
                        }


                        $.get(globals.URL_BAOTOU_EXPENCENT_MONTH+'?year='+first[0]+'&month='+first[1]).done(function (data) {
                            data = jQuery.parseJSON(data);
                            var second = checks[1].split('-');
                            if(parseInt(second[1])<10){
                                second[1] = '0'+ second[1];
                            }
                            $.get(globals.URL_BAOTOU_EXPENCENT_MONTH+'?year='+second[0]+'&month='+second[1]).done(function (term) {
                                term = jQuery.parseJSON(term);

                                //比较每月天数，取最大天数
                                var fdayCount = new Date(first[0],first[1],0).getDate();
                                var sdayCount = new Date(second[0],second[1],0).getDate();
                                if(parseInt(fdayCount) > parseInt(sdayCount)){
                                    for (var c = 0; c < parseInt(fdayCount); c++) {
                                        xValue.push((c + 1));
                                    }
                                }else{
                                    for (var c = 0; c < parseInt(sdayCount); c++) {
                                        xValue.push((c + 1));
                                    }
                                }

                                var c_index = data.c_index.split(',');
                                if(c_index.length >= parseInt(fdayCount)){
                                    for (var d = 0; d < c_index.length; d++) {
                                        fValue.push(c_index[d]);
                                    }
                                }else{
                                    for (var d = 0; d < parseInt(fdayCount); d++) {
                                        if(d > c_index.length-1){
                                            fValue.push(c_index[c_index.length-1]);
                                        }else{
                                            fValue.push(c_index[d]);
                                        }

                                    }
                                }



                                var c_index_second = term.c_index.split(',');
                                if(c_index_second.length >= parseInt(sdayCount)){
                                    for (var s = 0; s < c_index_second.length; s++) {
                                        uValue.push(c_index_second[s]);
                                    }
                                }else{
                                    for (var s = 0; s < parseInt(sdayCount); s++) {
                                        if(s > c_index_second.length-1){
                                            uValue.push(c_index_second[c_index_second.length-1]);
                                        }else{
                                            uValue.push(c_index_second[s]);
                                        }

                                    }
                                }
                             /*   for (var s = 0; s < c_index_second.length; s++) {
                                    uValue.push(c_index_second[s]);
                                }*/
                                var mChart = echarts.init(document.getElementById('monthLine'));
                                mChart.setOption({
                                    title:{
                                        text:'月度指数分析',
                                        textStyle:{
                                            color:'#ebebef',
                                        },
                                    },
                                    tooltip: {
                                        trigger: 'axis',
                                        axisPointer: {
                                            type:'shadow',
                                        }
                                    },
                                    legend: {
                                        left:'23%',
                                        top:'10%',
                                        textStyle:{
                                            color:'#f7f7f8',
                                            fontWeight:20
                                        },
                                        data:[checks[0]+'月',checks[1]+'月']
                                    },
                                    grid:{
                                        show:true,
                                        left: '0px',
                                        right:'10px',
                                        top:'50px',
                                        bottom:'0px',
                                        containLabel: true,


                                        borderColor:'yellow',
                                    },
                                    xAxis: {
                                        type: 'category',
                                        boundaryGap: false,
                                        data: xValue,
                                        axisLabel: {margin: 2, textStyle: {color: '#aaa'}},
                                    },
                                    yAxis: {
                                        boundaryGap: [0, '50%'],
                                        type: 'value',
                                        axisLabel: {interval: 0, textStyle: {color: '#ddd',fontSize:15}},
                                    },
                                    series: [
                                        {
                                            name: checks[0]+'月',
                                            type: 'line',
                                            smooth:true,
                                            symbol: 'none',
                                            itemStyle:{
                                                normal:{
                                                    color:'#34a02b',
                                                }
                                            },
                                            data: fValue
                                        },
                                        {
                                            name: checks[1]+'月',
                                            type: 'line',
                                            smooth:true,
                                            symbol: 'none',
                                            itemStyle:{
                                                normal:{
                                                    color:'#0288ce',
                                                }
                                            },
                                            data: uValue
                                        }
                                    ]

                                })

                            })
                        })
                    }else{
                        var first = checks[0].split('-');
                        if(parseInt(first[1])<10){
                            first[1] = '0'+ first[1];
                        }
                        $.get(globals.URL_BAOTOU_EXPENCENT_MONTH+'?year='+first[0]+'&month='+first[1]).done(function (data) {
                            data = jQuery.parseJSON(data);
                            var c_index = data.c_index.split(',');
                            for (var d = 0; d < c_index.length; d++) {
                                xValue.push((parseInt(d) + 1));
                                fValue.push(c_index[d]);


                            }
                            var mChart = echarts.init(document.getElementById('monthLine'));
                            mChart.setOption({
                                title:{
                                    text:'月度指数分析',
                                    textStyle:{
                                        color:'#ebebef',
                                    },
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type:'shadow',
                                    }
                                },
                                legend: {
                                    left:'23%',
                                    top:'10%',
                                    textStyle:{
                                        color:'#f7f7f8',
                                        fontWeight:20
                                    },
                                    data:[checks[0]+'月']
                                },
                                grid:{
                                    show:true,
                                    left: '0px',
                                    right:'10px',
                                    top:'50px',
                                    bottom:'0px',
                                    containLabel: true,
                                    borderColor:'yellow',
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: xValue,
                                    axisLabel: {margin: 2, textStyle: {color: '#aaa'}},
                                },
                                yAxis: {
                                    boundaryGap: [0, '50%'],
                                    type: 'value',
                                    axisLabel: {interval: 0, textStyle: {color: '#ddd',fontSize:15}},
                                },
                                series: [
                                    {
                                        name: checks[0]+'月',
                                        type: 'line',
                                        smooth:true,
                                        symbol: 'none',
                                        itemStyle:{
                                            normal:{
                                                color:'#34a02b',
                                            }
                                        },
                                        data: fValue
                                    }
                                ]

                            })

                        })
                    }
                }
                if(flag){
                    this.checkTexts = [];
                    this.chenckCount = [];
                }

            },
            selectInitHolidayLine(){
                var yearId = parseInt(document.getElementById('yearHolidayId').value)-1;
                var holi = document.getElementById('holidayId');
                var holidayId = holi.value;

                var holiText = holi.options[holi.selectedIndex].text;

                var xValue = new Array();

                var titleHoli = [
                    holiText+'前三天',holiText+'期间',holiText+'后三天'
                ]


                $.get(globals.URL_BAOTOU_EXPENCENT_HOLI+'?year='+yearId+'&holiday='+holidayId).done(function (data) {
                    data = jQuery.parseJSON(data);
                    for(var i=0;i<data.data[0].c_index.split(',').length;i++){
                        xValue.push(i+1);
                    }
                    var mChart = echarts.init(document.getElementById('holidayLine'));
                    var holiData = new Array();
                    if(holidayId == 'H1'){
                        holiData.push(data.data[data.data.length-2].c_index.split(','));
                        holiData.push(data.data[4].c_index.split(','));
                        holiData.push(data.data[data.data.length-1].c_index.split(','));
                    }else{
                        holiData.push(data.data[0].c_index.split(','));
                        holiData.push(data.data[4].c_index.split(','));
                        holiData.push(data.data[data.data.length-1].c_index.split(','));
                    }

                    mChart.setOption({
                        title:{
                            text:'节假日指数预警',
                            textStyle:{
                                color:'#ebebef',
                            },
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type:'shadow',
                            }
                        },
                        legend: {
                            left:'15%',
                            top:'13%',
                            textStyle:{
                                color:'#f7f7f8',
                                fontWeight:20
                            },
                            data:titleHoli
                        },
                        grid:{
                            show:true,
                            left: '0px',
                            right:'10px',
                            top:'50px',
                            bottom:'0px',
                            containLabel: true,


                            borderColor:'yellow',
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: xValue,
                            axisLabel: {margin: 2, textStyle: {color: '#aaa'}},
                        },
                        yAxis: {
                            boundaryGap: [0, '50%'],
                            type: 'value',
                            axisLabel: {interval: 0, textStyle: {color: '#ddd',fontSize:15}},
                        },
                        series: [
                            {
                                name:titleHoli[0],
                                type:'line',
                                smooth:true,
                                symbol: 'none',
                                itemStyle:{
                                    normal:{
                                        color:'#34a02b',
                                    }
                                },
                                data: holiData[0]
                            },
                            {
                                name:titleHoli[1],
                                type:'line',
                                smooth:true,
                                symbol: 'none',
                                itemStyle:{
                                    normal:{
                                        color:'#0288ce',
                                    }
                                },
                                data: holiData[1]
                            },
                            {
                                name:titleHoli[2],
                                type:'line',
                                smooth:true,
                                symbol: 'none',
                                lineStyle:{
                                    normal:{
                                        color:'#bb5d0d',
                                    }
                                },
                                data: holiData[2]
                            }
                        ]

                    })
                });

            },
            resizeMap(topnav){
                setTimeout(() => {
                    console.log('重新加载地图');
                    if(topnav){
                        $('.exponentmap').css('top','0px');
                    }
                    env.mapTo.resize();

                },50)

            },
            initExponentMap(){

                minemap.accessToken = globals.MAP_ACCESS_TOKEN;
                minemap.solution = globals.MAP_SOLUTION;
                minemap.spriteUrl = globals.SPRITE_LOC
                minemap.fontsUrl = 'http://15.32.12.64/minemapapi/v1.2/fonts';
                minemap.domainUrl = 'http://15.32.12.64/minemap-server';
                var emap = new minemap.Map({
                    container: 'exponentmap',
                    style: globals.URL_SERVICE_ROOT + globals.URL_STYLE_RES_ROOT + this.styleId,
                    center: [109.899842, 40.635018],
                    zoom: 11,
                    pitch: 0,
                    maxZoom: 17,
                    dragRotate: false
                });

                env.mapTo = emap;
                env.mapTo.addControl(new minemap.Navigation(),"bottom-right");
                this.initselect();
           /*     this.selectInitYearLine();
                this.selectInitMonthLine();*/
                this.initFeatTab();
                setInterval(()=> {
                    this.initFeatTab();
                }, 1000 * 60 * 1);

                //定义一个空数组去接收value值



//仿select的点击事件
                $("#selectYear").click(function(event){

                    var ev = event || window.event;

                    //阻止默认事件及封装

                    if (ev.stopPropagation) {

                        ev.stopPropagation();

                    }else{

                        ev.cancelable = true;

                    }

                    $("#selectYear ul").css("display","block");

                });

                $("#selectBoard").click(function(event){

                    var ev = event || window.event;

                    //阻止默认事件及封装

                    if (ev.stopPropagation) {

                        ev.stopPropagation();

                    }else{

                        ev.cancelable = true;

                    }

                    $("#selectBoard ul").css("display","block");

                });



                $(window).click(function(){

                    $("#selectBoard ul").css("display","none");
                    $("#selectYear ul").css("display","none");

                });




            },
            initselect(){
                var selectYear = document.getElementsByName('selectId');
                var fullYear = new Date().getFullYear();
                for(var i=0;i<selectYear.length;i++){
                     var selecty = selectYear[i];
                     selecty.options.length=0;
                     if(fullYear > 2016){
                         for(var y=2016;y<=fullYear;y++){
                             var firstOption = document.createElement('option');
                             firstOption.setAttribute('value',y);
                             firstOption.appendChild(document.createTextNode(y+'年'));
                             selecty.appendChild(firstOption);
                         }
                     }

                    for(var t=0; t<selecty.options.length; t++){
                        console.log('value=========='+selecty.options[t].value);
                        if(selecty.options[t].value == fullYear){
                            selecty.options[t].selected = true;
                            break;
                        }
                    }

                }
                var selectYear_holi = document.getElementsByName('selectId_holi');
                var fullYear_holi = new Date().getFullYear();
                for(var i=0;i<selectYear_holi.length;i++){
                    var selecty_holi = selectYear_holi[i];
                    selecty_holi.options.length=0;
                    for(var y=2017;y<=fullYear;y++){
                        var firstOption_holi = document.createElement('option');
                        firstOption_holi.setAttribute('value',y);
                        firstOption_holi.appendChild(document.createTextNode(y+'年'));
                        selecty_holi.appendChild(firstOption_holi);
                    }

                }
                var fullYears = new Array();
                var years = new Array();
                var fullYear = new Date().getFullYear();
                if(fullYear >2016){
                    for(var y=2016;y<=fullYear;y++){
                        years.push(y);
                        var months = new Array();
                        var month = new Date().getMonth()+1;
                        if(y == fullYear){
                            for(var i=1;i<=month;i++){
                                months.push({'value':y+'-'+i,'text':i,'liClass':'month'+i});
                            }
                            fullYears[y] = months
                        }else{
                            for(var m=1;m<=12;m++){
                                months.push({'value':y+'-'+m,'text':m,'liClass':'month'+m});
                            }
                            fullYears[y] = months;
                        }
                    }
                    this.fullYears = fullYears;
                    this.years = years;
                    this.months = this.fullYears[2016];
                }


            }
        },
        mounted(){

            this.initExponentMap();

        },
        computed: {
            ...mapGetters({
                mapType: 'mapType',
                mapbodyfullstatus: 'mapbodyfullstatus',
            }),
            nav_hiddenorneot_img(){
                return this.mapbodyfuzllstatus ? 'static/img/mapfull.png' : 'static/img/mapnotfull.png'
            },
            ctrlBtnSrc(){
                return this.ctrl_btn_2d_status ? 'static/img/map/2d.png' : 'static/img/map/3d.png';
            },
            trafficBtnSrc(){
                return this.traffic_status ? 'static/img/map/traffic_on.png' : 'static/img/map/traffic_off.png'
            },
            styleId(){
                if (this.mapType === globals.MAP_TYPE_DARK) {
                    return configs.styleIdDark;

                } else if (this.mapType === globals.MAP_TYPE_LIGHT) {
                    return configs.styleIdLight;
                }
                console.log("++++++++++++++++++++++++++"+this.mapType);
            },
            layerBefore(){
                if (this.mapType === globals.MAP_TYPE_DARK) {
                    return configs.layerBeforeDark;
                } else if (this.mapType === globals.MAP_TYPE_LIGHT) {
                    return configs.layerBeforeLight;
                }
            },
            darkClass (){
                return {
                    'flex-item': true,
                    'flex-select': this.mapType === globals.MAP_TYPE_DARK
                }
            },
            lightClass (){
                return {
                    'flex-item': true,
                    'flex-select': this.mapType === globals.MAP_TYPE_LIGHT
                }
            }
        },
        destroyed () {
            clearInterval(this.interval);
        }

    }

</script>
<style scope>
    .exponentmap {
        z-index: 50;
        background-color: #f3f3f3;
        position: fixed;
        /* width:100%;
         height:100%;*/
        left: 0;
        right: 0;
        top: 67px;
        bottom: 0;

        /*text-align: center;*/
    }

    #dmap {
        position:fixed;
        width:100%;
        height:92.4%;
        z-index:59;
    }
    .left-line{
        /*width:280px;*/
        position:fixed;

        margin-left:37px;
        z-index:51;
        /*reight:20px;*/
        left:5px;
    }
    .select{

        margin-left: 320px;
        margin-top:8px;
        background-color: #003399;
        position:absolute;
        z-index:88;
        border-radius: 5px;
    }

    .top-line{
        list-style-type:none;
        background: #01174d;
        /*  background: rgba(255, 255, 255, .3);*/
        line-height: 15px;
        padding: 5px 10px;
        margin-bottom: 2px;
        color:#fcfcfd;
        height:230px;
        width:550px;
        border:0.5px solid #696262;
        margin-top: 15px;

    }

    .center-line{
        list-style-type:none;
        background: #01174d;
        /*  background: rgba(255, 255, 255, .3);*/
        line-height: 15px;
        padding: 5px 10px;
        margin-bottom: 2px;
        color:#fcfcfd;
        height:230px;
        width:550px;
        border:0.5px solid #696262;
        margin-top: 15px;

    }
    .buttom-line{
        list-style-type:none;
        background: #01174d;
        /*  background: rgba(255, 255, 255, .3);*/
        line-height: 15px;
        padding: 5px 10px;
        margin-bottom: 2px;
        color:#fcfcfd;
        height:230px;
        width:550px;
        border:0.5px solid #696262;
        margin-top: 15px;

    }
    .yearLine{
        list-style-type:none;
        background: #01174d;
        /*  background: rgba(255, 255, 255, .3);*/
        line-height: 15px;
        padding: 5px 10px;
        margin-bottom: 2px;
        color:#fcfcfd;
        height:200px;
    }

    .monthLine{
         list-style-type:none;
         background: #01174d;
         /*  background: rgba(255, 255, 255, .3);*/
         line-height: 15px;
         padding: 5px 10px;
         margin-bottom: 2px;
         color:#fcfcfd;
         height:200px;
     }

    .holidayLine{
        list-style-type:none;
        background: #01174d;
        /*  background: rgba(255, 2
        55, 255, .3);*/
        line-height: 15px;
        padding: 5px 10px;
        margin-bottom: 2px;
        color:#fcfcfd;
        height:200px;
    }
    .metro_tab{
        position: fixed;
        background-color: #02194d;
        width: 400px;

        margin-top:25px;
        margin-left:50px;
        z-index:55;
        border: 1px solid #696262;

    }

    .metro_tab h4{
        width: 400px;
        text-align: center;
        color: #F5F5F5;
        font-weight: 800;
        font-size: 22px;
        line-height: 35px;

    }
    .table_tab_o{
        width: 400px;
        text-align: center;
        color: #F5F5F5;
        background-color: #002060;
        border-top: 3px solid #d7d7d7;
        border-bottom: 3px solid #d7d7d7;
        line-height: 25px;
    }
    .table_tab_o tr td{
        border: 2px solid #000000;
    }
    .table_tab_o_tr{
        color: #000000;
    }
    .table_tab_t{
        width: 400px;
        color: #fefefe;
        height: 100px;
        overflow-y: auto;
    }
    .table_tab_t tr th{
        font-weight: 800;
        text-align: center;
        font-size: 20px;
        line-height: 30px;
        border-bottom: 3px solid #d7d7d7;
    }
    .table_tab_t tr td{
        text-align: center;
        line-height: 30px;
        border-bottom: 1px solid #d7d7d7;
        font-weight: 800;
    }
    .table_tab_t tbody{
        display: block;
        height: 520px;
        overflow: auto;
    }
    .table_tab_t td{
        width: 128px;
    }
    .table_tab_t th{
        width: 200px;

    }.table_tab_t thead tr{
         display:block;

     }
    .table_tab_t tbody tr:hover{background-color: #0d4dde;cursor: pointer;}
    .tab_tr{background-color: #0d4dde;}
    .change_tab{
        position: fixed;
        z-index:55;
        font-size: 20px;
        font-weight: 800;
        text-align: center;
        margin-left:5px;

    }
    .change_tab_o_show{
        width: 30px;
        height: 200px;
        background-color: #ececec;
        padding-top: 12px;
        -webkit-border-radius: 8px;
        margin-top:130px;
    }
    .change_tab_o_hide{
        width: 30px;
        height: 200px;
        background-color: #62677e;
        padding-top: 12px;
        -webkit-border-radius: 8px;
        margin-top:130px;
    }
    .change_tab_t_show{
        width: 30px;
        height: 200px;
        background-color: #ececec;
        margin-top: 30px;
        padding-top: 12px;
        -webkit-border-radius: 8px;
        padding-top:40px;
    }
    .change_tab_t_hide{
        width: 30px;
        height: 200px;
        background-color: #62677e;
        margin-top: 30px;
        padding-top: 12px;
        -webkit-border-radius: 8px;
        padding-top:40px;
    }

    .sudu1{
        background-color:#92d050;
    }
    .sudu2{
        background-color:#ccff99;
    }
    .sudu3{
        background-color:#ff0;
    }
    .sudu4{
        background-color:#fc0;
    }
    .sudu5{
        background-color:#f00;
    }
/*    #wrap{

        width: 500px;

        height: 500px;

        border: 1px solid blue;

        margin: 100px auto;

    }*/

    #selectBoard{

        width: 135px;

        height: 20px;

        border: 1px solid #747c8f;

        border-radius: 5px;

        position: absolute;

        margin: 30px auto;
        margin-top:8px;
        margin-left:397px;
        background-color:#003399;
        text-align:center;
        padding-top:2px;
        padding-left:0px;
        z-index:88;

    }

    #selectBoard ul{

        width: 136px;

        background: #003399;

        position: absolute;

        top:-1px;

        left:-1px;

        border: 1px solid #747c8f;

        border-radius: 5px;


        display: none;

    }

    #selectBoard ul li{

        list-style: none;
        margin-left:-38px;

    }


    #selectYear{

        width: 135px;

        height: 20px;

        border: 1px solid #747c8f;

        border-radius: 5px;

        position: absolute;

        margin: 30px auto;
        margin-top:8px;
        margin-left:386px;
        background-color:#003399;
        text-align:center;
        padding-top:2px;
        padding-left:0px;
        z-index:88;

    }

    #selectYear ul{

        width: 136px;

        background: #003399;

        position: absolute;

        top:-1px;

        left:-1px;

        border: 1px solid #747c8f;

        border-radius: 5px;


        display: none;

    }

    #selectYear ul li{

        list-style: none;
        margin-left:-38px;

    }
    input[type=checkbox] {
        visibility: hidden;
    }

    #selectBoard ul li:hover{background: dodgerblue;}
    #selectYear ul li:hover{background: dodgerblue;}

    .creat{
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 5px;
        margin-top:-2px;
        vertical-align: middle;
        border-top: 4px solid;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
    }
    .selectd_che{
        background: dodgerblue;
        border:0.5px solid #696262;
    }
    .marker_circle{
        background-image: url(../../static/img/analyIcon/ditiezhan.png);
        background-size: cover;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        cursor: pointer;
        z-index:88;
    }


</style>